import React, { useEffect, useState } from 'react'
import { Carousel } from 'antd'
import './index.scss'
import useScorll from '@/hooks/useScorll'
import apis from '@/apis'
import WebSource from '@/components/WebSource/index'
const Home: React.FC = () => {
  const { scrollToTop } = useScorll()
  useEffect(() => {
    scrollToTop()
  }, [])
  const [infoData, setInfoData]: any = useState(null)
  useEffect(() => {
    async function queryInfo() {
      const res = await apis.getInfoApi()
      setInfoData(res)
    }
    queryInfo()
  }, [])
  return (
    <>
      {infoData && (
        <Carousel autoplay effect="fade" id="banner">
          {infoData.bannerImgList.map((item, index) => (
            <img key={index} className="bannerImg" src={item} />
          ))}
        </Carousel>
      )}
      {infoData &&
        infoData.intro.map((item, index) => {
          return (
            <div key={index}>
              <div className="tips">{item.title}</div>
              {item.content.map((it, id) => (
                <div className="textBox" key={id}>
                  {it}
                </div>
              ))}
            </div>
          )
        })}
      {infoData && <WebSource></WebSource>}
    </>
  )
}

export default Home
